<template>
	<view class="uni_box">
        <view class="aone">
            <view class="ditu">
                <view class="head" :style="{paddingTop: titleTop + 'px'}">
                    <image src="/static/admin/img_rj.png" class="img_rj"></image>
                    <text class="hname">来牛牛   招工找活快人一步</text>
                    <view class="ggao" style="z-index: 15;position: relative; pointer-events:auto;" v-if="noticlist" @click="getweigui">
                        <view class="notic">
                            <image class="icon_gg" src="/static/img/ggao.png" />
                            <view class="noticright">
                                <u-notice-bar mode="vertical" :list="noticlist" bg-color="none" color="#2ACB50" font-size="24"
                                    :volume-icon="false" @click="getweigui" :is-circular="true" duration="3500"></u-notice-bar>
                            </view>
                            <view class="gongshi">违规公示</view>
                        </view>
                    </view>
                </view>
                <map
                    id="map"
                    :longitude="longitude"
                    :latitude="latitude"
                    scale="15"
                    style="width: 100%; height: 100%;"
                    @tap="moveToLocation"
                    @regionchange="onRegionChange"
                    ></map>
                <view class="icondi">
                    <view class="fuview">
                        <text class="funum">附近有<text class="funums">{{people||0}}</text>位零工</text>
                        <text class="zui" v-if="time_text">{{time_text}}</text>
                    </view>
                    <image src="/static/admin/icon_dw.png" style="width: 24px; height: 35px;"></image>
                </view>
                <view class="dinwei" @click="getchushi">
                    <image src="/static/admin/icon_dwwz.png" class="icon_dwwz"></image>
                </view>
                
            </view>
            <view class="atwo">
                <view class="fabu" @click="zhaoshow=true">
                    <view class="faitem">
                        <text class="faname">去发布招工</text>
                        <view class="sdan" v-if="user.free_nums&&user.free_nums!=0">{{ user.free_nums==1?'首单免费':'前'+user.free_nums+'单免费' }}</view>
                    </view>
                </view>
                <view class="fatwo">
                    <view class="fadizhi" @click="getdizhi">
                        <text class="diname">招工地址管理</text>
                        <text class="dimiao">上传照片视频</text>
                        <image class="icon_dzgl" src="/static/admin/icon_dzgl.png"></image>
                    </view>
                    <view class="fawen" style="margin-left: 18rpx;"  @click="getwenti">
                        <image class="icon_wt" src="/static/admin/icon_wt.png"></image>
                        <text>遇到问题</text>
                    </view>
                    <view class="fawen">
                        <button  open-type="contact" class="btn">
							
						</button>
                        <image class="icon_wt" src="/static/admin/icon_kf.png"></image>
                        <text>联系客服</text>
                    </view>
                </view>
                <view class="zlin">
                    <view class="zleft">
                        <image class="bg" src="/static/admin/img_zgpt.png"></image>
                        <view class="litem">
                            <text class="zrname">专业零工平台</text>
                            <text class="zrmiao">快速招人 员工靠谱</text>
                        </view>
                    </view>
                    <view class="zright">
                        <view class="zrlitem">
                            <image class="bg" src="/static/admin/img_jsfw.png"></image>
                            <view class="zritem">
                                <text class="zrname">招工加速服务</text>
                                <text class="zrmiao">加专属招工专员</text>
                            </view>
                        </view>
                        <view class="zrlitem mt">
                            <image class="bg" src="/static/admin/img_zg.png"></image>
                            <view class="zritem">
                                <text class="zrname">免费招工啦</text>
                                <text class="zrmiao">转发海报 领招工券</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 招工人弹窗 -->
        <u-popup  v-model="zhaoshow" mode="bottom" width="100%" ref="auth" :mask-close-able="false" :custom="true" :mask-click="false" @close="closezhao">
            <view class="popone">
                <image class="bg" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" mode="" />
                <view class="phonenav">
                    <view class="cha" @click="closezhao">
                        <image class="icon_gbcha" src="/static/img/icon_gbcha.png" mode="" />
                    </view>
                    <text class="jiename">招什么工人？</text>
                    <view class="rilist" @click="getfabu">
                        <image class="icon_rj" src="/static/admin/icon_rj.png" mode="" />
                        <view class="rinav">
                            <view class="jiview">
                                <text class="riname">1天日结</text>
                                <text class="jiname">计时/计件</text>
                            </view>
                            <text class="rimiao">干1天活，下班结</text>
                        </view>
                        <view class="qufa">去发布</view>
                    </view>
                    <view class="rilist" @click="getfabu">
                        <image class="icon_rj" src="/static/admin/icon_zj.png" mode="" />
                        <view class="rinav">
                            <view class="jiview">
                                <text class="riname">多天日结</text>
                                <text class="jiname">计时/计件</text>
                            </view>
                            <text class="rimiao">干2-7天活，每天结</text>
                        </view>
                        <view class="qufa">去发布</view>
                    </view>
                </view>
            </view>
        </u-popup>

        <!-- 温馨提示说明 -->
		<u-popup  v-model="wenxinpop" mode="center" width="80%" ref="auth" :mask-close-able="false" :custom="true" :mask-click="false" @close="wenxinpop=false">
            <view class="popone"  style="padding-bottom: 0;border-radius: 30rpx 30rpx;">
                <image class="bg" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" mode="" />
                <view class="phonenav phonenavnew">
                    <view class="cha" @click="closezhao">
                        <image class="icon_gbcha" src="@/static/img/icon_gbcha.png" mode="" />
                    </view>
                    <text class="jiename" style="margin-bottom: 10px;">温馨提示</text>
                    <text class="mshu">平台严禁飞单,违者将被封号</text>
                    <view class="queli">
                        <view class="queitem">
                            <image class="icon_xz_s" src="@/static/img/icon_xz_s.png" mode="" />
                            <text>禁止获取电话号码!</text>
                        </view>
                        <view class="queitem">
                            <image class="icon_xz_s" src="@/static/img/icon_xz_s.png" mode="" />
                            <text>禁止线上或见面后添加微信!</text>
                        </view>
						<view class="queitem">
                            <image class="icon_xz_s" src="@/static/img/icon_xz_s.png" mode="" />
                            <text>禁止绕过平台进行私下交易,包括后续交易等!</text>
                        </view>
                    </view>
                    <text class="mshu" style="margin-bottom: 20rpx;">员工飞单,平台将立即处理</text>
                    <view class="dianbtn"  @click="wenxinpop = false">
                        <text class="bm">知道了</text>
                    </view>
                    <!-- <text class="kaolv"  @click="closeorder">取消</text> -->
                </view>
                
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    name: 'AHome',
	data() {
		return {
			backgroundColor:'none',
            titleTop: 0,
 			statusBarHeight: 0,
            noticlist: [
				// '寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴寒雨连江夜入吴',
				// '平明送客楚山孤',
				// '洛阳亲友如相问',
				// '一片冰心在玉壶'
			],
             markers: [{
                id: 0,
                latitude:0,
                longitude:0,
                // title: '888',
                // iconPath: '/static/admin/icon_dw.png',
                // rotate: 0,
                // width: 24,
                // height: 35,
                // anchor: {
                //     x: 0.5,
                //     y: 1
                // } ,
                // callout: {
                //     content: '附近有50位零工',
                //     color: '#000000',
                //     fontSize: 10,
                //     borderRadius: 25,
                //     borderWidth: 0,
                //     bgColor: '#fff',
                //     padding: 10,
                //     display: 'ALWAYS',
                //     textAlign:'center'
                // }
            }],
            oldlatitude:'',
            oldlongitude:'',
            latitude:'',
            longitude:'',
            zhaoshow:false,
            wenxinpop:false,
            people:0,
            isProcessing:false,
            time_text:'',
            isdinwei:false,

		}
	},
	components: {
	},
    props: {
		user:{
			type:Object
		}

    },
	computed: {
	},

	mounted() {
        // #ifdef MP-WEIXIN
		let that = this;
		// 获取胶囊按钮位置信息
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		const { top, height } = menuButtonInfo;
		const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

		// 计算标题需要偏移的位置
		const titleTop = top + (height - statusBarHeight) / 2;
		this.titleTop = titleTop;//设置标题顶部距离
		this.statusBarHeight = statusBarHeight;//设置状态栏高度
		// #endif
        // #ifdef H5
        this.titleTop = 20;//设置标题顶部距离
        // #endif
        this.getLocation()
        // wenxinpop
        console.log(uni.getStorageSync('token'))
        if(!uni.getStorageSync('wenxinpop')){
            this.wenxinpop = true
            uni.setStorageSync('wenxinpop',true)
        }
        this.getgshi();
	},
	async onLoad() {
		

	},
	async onShow() {
	},
	onReachBottom: function () {
	},
	methods: {
        getLocation() {
            let that = this;
            uni.getLocation({
                type: 'wgs84', // 返回可以用于wx.openLocation的经纬度
                success: function(res) {
                    console.log(res)
                    const latitude = res.latitude;
                    const longitude = res.longitude;
                    that.latitude=Number(latitude)
                    that.longitude=Number(longitude)
                    that.oldlatitude=Number(latitude)
                    that.oldlongitude=Number(longitude)
                    that.isdinwei = true
                    if(uni.getStorageSync('token')){
						that.getgxwz(that.latitude,that.longitude);//更新当前位置
					}
                    that.gethome(that.latitude,that.longitude);//获取首页定位数据
                },
                fail: () => {
                    uni.showToast({ title: '定位失败', icon: 'none' });
                }
            });
        },
        onRegionChange(e) {
            let that = this;
            if(e.type == 'end'&& !this.isProcessing&&that.isdinwei){
                that.latitude=Number(e.detail.centerLocation.latitude)
                that.longitude=Number(e.detail.centerLocation.longitude)
                that.isProcessing = true;
                console.log(that.latitude,that.longitude)
                if(that.longitude != 0){
                    that.gethome(that.latitude,that.longitude);//获取首页定位数据
                }
                
                setTimeout(() => { that.isProcessing = false; }, 1000); // 防止连续快速触发
            }
        },
        async gethome(latitude,longitude){
            let res = await this.$u.api.getNumsByDistance({
                lat:latitude,
                lng:longitude
            });
            console.log(res)
            this.people = res.count
            this.time_text = res.time_text
        },
        async getgxwz(latitude,longitude){

            let res = await this.$u.api.user({
                lat:latitude,
                lng:longitude
            });
        },
        getchushi(){
            let that = this;
            that.latitude=that.oldlatitude
            that.longitude=that.oldlongitude
            that.gethome(that.latitude,that.longitude);//获取首页定位数据
        },
        closezhao(){
            this.zhaoshow= false
        },
        getfabu(){
            this.zhaoshow= false
            this.navrouter("/pages_admin/twoPage/FabuJob");
        },
        getdizhi(){
            this.navrouter("/pages_admin/twoPage/Adress");
        },
        getwenti(){
            this.navrouter("/pages_admin/twoPage/Problem");
        },
        getweigui(){
            console.log("+++")
            this.navrouter("/pages/TPage/Gongshi?type=2");
        },
        async getgshi(){
            let res = await this.$u.api.getWgByBoss({
            });
            let params = res.list
            let shuzu = []
            for(let i in params){
                shuzu.push(params[i].name+'-'+params[i].type+'-'+params[i].jiang)

            }
            this.noticlist = shuzu
        }
	}
}
</script>

<style lang="scss" scoped>
page,
html {
	background: #F5F5F5;
    // box-shadow: 0rpx -1rpx 9rpx 0rpx #EEEEEE;
}
.uni_box{
    padding-bottom: 88rpx;
}
/deep/ .u-sticky {
	z-index: 1007500000 !important;
}
/deep/.u-drawer-bottom{
    background-color: transparent !important;
}
.u-drawer-bottom{
    background-color: transparent !important;
}
.ditu{
    position: relative;
    height: 450px;
    width: 100%;
    .head{
        position: absolute;
        pointer-events: none;
        padding: 0 30rpx;
        background-color: transparent;
        display: flex;
        flex-direction: column;
        width: 100%;
        z-index: 10;
        .img_rj{
            width: 168rpx;
            height: 47rpx;
        }
        .hname{
            display: block;
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
            margin-top: 6rpx;
        }
        .notic {
            // margin: 20rpx 20rpx;
            width: 100%;
            padding: 4rpx 30rpx;
            background: #FFFFFF;
            border-radius: 34rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 10rpx;

            .icon_gg {
                width: 30rpx;
                height: 30rpx;
                display: inline-block;
            }

            .noticright {
                width: 85%;
            }
            .gongshi{
                width: 130rpx;
                height: 40rpx;
                background: #FFEFE9;
                border-radius: 20rpx;
                margin-left: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                font-size: 20rpx;
                color: #EA5918;
            }
        }
    }
    .icondi{
        pointer-events: none;
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        // z-index: 100;
        z-index: 1;
        top: 0;
        flex-direction: column;
        .fuview{
            padding: 16rpx 40rpx;
            margin-bottom: 10rpx;
            background-color: #fff;
            background: #FFFFFF;
            box-shadow: 0rpx 1rpx 9rpx 0rpx rgba(204,204,204,0.89);
            border-radius: 50rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .funum{
                font-weight: bold;
                font-size: 28rpx;
                color: #000000;
            }
            .funums{
                color: rgba(234, 89, 24, 1);
            }
            .zui{
                font-weight: 400;
                font-size: 22rpx;
                color: #999999;
                display: inline-block;
                margin-top: 4rpx;
            }
        }
    }
}

.atwo{
    padding:30rpx;
    background: linear-gradient(0deg, #FFFFFF, #F6F7F9);
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    position: relative;
    z-index: 10;
    margin-top: -130rpx;
    min-height: 50vh;
    .fabu{
        width: 690rpx;
        height: 110rpx;
        background: linear-gradient(90deg, #FF8F39, #FF4D43);
        border-radius: 55rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 30rpx;
        .faname{
            font-weight: bold;
            font-size: 36rpx;
            color: #FFFFFF;
        }
        .sdan{
            width: 125rpx;
            height: 40rpx;
            background: #FFDC17;
            border-radius: 0rpx 20rpx 20rpx 20rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 24rpx;
            color: #FF2A2A;
            margin-left: 12rpx;
            position: absolute;
            top: 5rpx;
            right: -135rpx;
        }
        .faitem{
            position: relative;
        }
    }
    .fatwo{
        display: flex;
        flex-direction: row;
        .fadizhi{
            width: 335rpx;
            height: 160rpx;
            background: #FFFFFF;
            border-radius: 24rpx;
            display: flex;
            flex-direction: column;
            padding: 30rpx;
            position: relative;
        }
        .diname{
            font-weight: 800;
            font-size: 28rpx;
            color: #111111;
        }
        .dimiao{
            font-weight: 400;
            font-size: 20rpx;
            color: #666666;
        }
        .icon_dzgl{
            position: absolute;
            width: 56rpx;
            height: 56rpx;
            right: 30rpx;
            bottom: 30rpx;
        }
    }
    .fawen{
        flex: 1;
        margin: 0 9rpx;
        height: 160rpx;
        background: #FFFFFF;
        border-radius: 24rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        .icon_wt{
            width: 56rpx;
            height: 56rpx;
            margin-bottom: 20rpx;
        }
        text{
            font-weight: 800;
            font-size: 26rpx;
            color: #333333;
        }
    }
    .fawen:first-child{
        margin-left: 18rpx;
    }
    .fawen:last-child{
        margin-right: 0;
    }
}
.zlin{
    display: flex;
    flex-direction: row;
    margin-top: 20rpx;
    .zleft{
        flex: 1;
        position: relative;
        height: 280rpx;
        margin-right: 18rpx;
        .litem{
            position: relative;
            padding:35rpx 25rpx;
            display: flex;
            flex-direction: column;
            .zrname{
                font-weight: 800;
                font-size: 32rpx;
                color: #333333;
            }
            .zrmiao{
                font-weight: 400;
                font-size: 20rpx;
                color: #666666;
                display: block;
                margin-top: 12rpx;
            }
        }
    }
    .zright{
        flex: 1;
        position: relative;
        height: 280rpx;
        display: flex;
        flex-direction: column;
        .zrlitem{
            height: 48%;
            width: 100%;
            position: relative;
            .zritem{
                position: relative;
                padding: 25rpx;
                display: flex;
                flex-direction: column;
                .zrname{
                    font-weight: 800;
                    font-size: 28rpx;
                    color: #333333;
                }
                .zrmiao{
                    font-weight: 400;
                    font-size: 20rpx;
                    color: #666666;
                    display: block;
                    margin-top: 12rpx;
                }
            }
        }
        .mt{
            margin-top: auto;
        }
    }
}

.dinwei{
    position: absolute;
    bottom: 160rpx;
    right: 30rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 1rpx 20rpx 0rpx #EEEEEE;
    border-radius: 16rpx;
    width: 88rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon_dwwz{
        width: 44rpx;
        height: 44rpx;
    }
}
.txt {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
a .csssprite {
display: none;
}

/deep/.u-drawer-bottom{
    background-color: transparent;
}
.popone{
    width: 100%;
    background: rgba(245, 245, 245, 1);
    border-radius: 30rpx 30rpx 0 0;
    // height: 530rpx;
    padding-bottom: 200rpx;
    .bg{
        position: absolute;
        width: 100%;
        height: 300rpx;
        border-radius: 30rpx 30rpx 0 0 ;
    }
    .rilist{
        padding: 35rpx;
        background: #FFFFFF;
        border-radius: 30rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        margin-bottom: 20rpx;

        .icon_rj{
            width: 97rpx;
            height: 97rpx;
            margin-right: 20rpx;
        }
        .rinav{
            display: flex;
            flex-direction: column;
            flex: 1;
            .jiview{
                display: flex;
                flex-direction: row;
                flex: 1;
                align-items: center;
                .jiname{
                    margin-left: auto;
                    margin-right: 20rpx;
                    color: #FF4D43;
                    font-weight: 500;
                    font-size: 30rpx;
                }
            }
            .riname{
                font-weight: 800;
                font-size: 40rpx;
                color: #111111;
            }
            .rimiao{
                font-weight: 400;
                font-size: 28rpx;
                color: #999999;
                display: block;
                margin-top: 10rpx;
            }
        }
        .qufa{
            margin-left: auto;
            width: 150rpx;
            height: 58rpx;
            background: linear-gradient(90deg, #FF8F39, #FF4D43);
            border-radius: 29rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 24rpx;
            color: #FFFFFF;
        }
    }
    .icon_gbcha{
        width: 40rpx;
        height: 40rpx;
        margin-left: auto;
        position: absolute;
        right: 30rpx;
        top: 30rpx;
    }
    .yuedu{
        height: 80rpx;
        display: flex;
        padding: 0 30rpx;
        align-items: center;
        .icon_xz_n{
            width: 36rpx;
            height: 36rpx;
            margin-right: 8rpx;
        }
        .xy{
            font-weight: 500;
            font-size: 20rpx;
            color: #999999;
            display: block;
            width: 90%;
        }
        .xyhu{
            color: rgba(234, 89, 24, 1);
        }
    }
    .kaolv{
        font-weight: bold;
        font-size: 28rpx;
        color: #666666;
        display: block;
        text-align: center;
        margin-top: 20rpx;
    }
    .phonenav{
        position: relative;
        // margin: 30rpx;
        display: flex;
        flex-direction: column;
        // justify-content: center;
        align-items: center;
        padding: 40rpx 30rpx;
        width: 100%;

        .img_aq{
            width: 173rpx;
            height: 211rpx;
            margin-bottom: 20rpx;
        }
        .jiename{
            font-weight: bold;
            font-size: 36rpx;
            color: #111111;
            margin-bottom: 50rpx;
        }
        .queren{
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
            display: block;
            margin: 40rpx 0 80rpx;
        }
        .mshu{
            font-weight: 500;
            font-size: 32rpx;
            color: #FF4D43;
            display: block;
            margin: 0rpx;

        }
        .chaka{
            padding: 30rpx;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #F6F7F9;
            border-radius: 16rpx;
            margin: 25rpx 0;
            .chaname{
                font-weight: bold;
                font-size: 28rpx;
                color: #111111;
            }
            .phonenum{
                display: block;
                font-weight: bold;
                font-size: 50rpx;
                color: #F06047;
                margin: 10rpx 0;
            }
            .xiugai{
                display: flex;
                flex-direction: row;
                align-items: center;
                .noben{
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #666666;
                }
                .xiu{
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #F06047;
                    display: inline-block;
                    margin-left: 6rpx;
                }
            }
        }
        .dianbtn{
            height: 90rpx;
            background: linear-gradient(90deg, #FF8F39, #FF4D43);
            border-radius: 45rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            margin-top: 20rpx;
            .bm{
                font-weight: bold;
                font-size: 28rpx;
                color: #FFFFFF;
            }
            .bmmaio{
                font-weight: 500;
                font-size: 20rpx;
                color: #FFFFFF;
            }
        }
        .bzhang{
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 30rpx;
            .icon_ts{
                margin-right: 6rpx;
                width: 24rpx;
                height: 24rpx;
            }
            .zhiname{
                font-weight: 400;
                font-size: 20rpx;
                color: #F06047;
            }
        }
    }
    .phonenavnew{
            position: relative;
            // margin: 30rpx;
            display: flex;
            flex-direction: column;
            // justify-content: center;
            align-items: center;
            padding: 40rpx 20rpx;
    }        
}
.btn{
        position: absolute;
        background-color: transparent;
        width: 100%;
        height: 100%;
        z-index: 1;
        left: 0;
        padding: 0;
        border: none !important;
    }
    /deep/ button::after  {
    border: none;
    
}
.queli{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 40rpx 0rpx 30rpx;
    // justify-content: center;
    // align-items: center;
    .queitem{
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        margin-bottom: 20rpx;
        padding-left: 30rpx;
        // justify-content: center;
        .icon_xz_s{
            margin-right: 15rpx;
            width: 36rpx;
            height: 36rpx;
        }
        text{
            font-weight: 500;
            font-size: 28rpx;
            color: #111111;
            max-width: 80%;
        }
    }
}

.immerse {
	width: 100%;
	height: calc(var(--status-bar-height) + env(safe-area-inset-top));
	background-color: #fff;
	// #ifdef APP-PLUS
	height: calc(var(--status-bar-height);
			// #endif
			z-index: 1007500000;
			position: relative;
	}</style>
